import React, {useState, useEffect, useRef} from 'react';
import { PageHeader, Steps, Button, Form, Input, Select, message, notification } from 'antd';
import './News.css'
import axios from 'axios';
import NewsEditor from '../../../components/news-manage/NewsEditor'
const NewsUpdata = (props) => {
    const { Step } = Steps;
    const { Option } = Select
    // 步骤条进度状态
    const [current, setcurrent] = useState(0)
    // 下拉框状态
    const [categoryList, setcategoryList] = useState([])
    // 存取第一步表单中的返回值
    const [formInfo, setformInfo] = useState({})
    // 存取富文本中的返回值
    const [content, setcontent] = useState("")
    // ref校验
    const NewsForm = useRef(null)
    // 读取用户数据
    useEffect(() => {
        axios.get('/categories').then(res=>{
            setcategoryList(res.data)
        })
    }, []);
    // 读取当前用户的的对应的id数据
    useEffect(()=>{
        axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then(res=>{
            let { title, categoryId, content } = res.data
            NewsForm.current.setFieldsValue({
                title,
                categoryId
            })
            setcontent(content)
        })
    },[props.match.params.id])
    // 下一步
    const handleNext = () => {
        if (current === 0) {
            NewsForm.current.validateFields().then(res=>{
                setformInfo(res)
                setcurrent(current+1)
            }).catch(err=>{
                console.log(err)
            })
        }else{
            if (content === "" || content.trim() === "<p></p>") {
                message.error("新闻内容不能为空")
            }else{
                // console.log(formInfo, content)
                setcurrent(current+1)
            }
        }
    }
    const handlePrevious=() => {
        setcurrent(current-1)
    }
    //提交草稿或者审核
    const handleSave = (auditState)=>{
        axios.patch(`/news/${props.match.params.id}`, {
            ...formInfo,
            "content": content,
            "auditState": auditState,
            // "publishTime": 0
        }).then(res=>{
            notification.info({
                message: `创建成功`,
                description:`您可以去${auditState === 0?'草稿箱':'审核列表'}中查看您创建的新闻`,
                placement:'bottomRight',
              });
        })
    }
    return (
        <div>
            <PageHeader
            className="site-page-header"
            onBack={() => {
                props.history.goBack()
            }}
            title="更新新闻"
            subTitle="This is a subtitle"
        />
        <Steps current={current}>
            <Step title="基本信息" description="新闻标题，新闻分类" />
            <Step title="新闻内容" description="新闻主体内容" />
            <Step title="新闻提交" description="保存草稿或者提交审核" />
        </Steps>

        {/* 内容框 */}
        <div style={{marginTop: '20px'}}>
            <div className={current === 0 ? '' : 'hidden'}>
                <Form
                name="basic"
                ref={NewsForm}
                >
                    <Form.Item
                        label="新闻标题"
                        name="title"
                        rules={[
                        {
                            required: true,
                            message: 'Please input your username!',
                        },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="新闻分类"
                        name="categoryId"
                        rules={[
                        {
                            required: true,
                            message: 'Please input your username!',
                        },
                        ]}
                    >
                        <Select>
                            {
                                categoryList.map(item=>{
                                    return <Option value={item.id} key={item.id}>{item.title}</Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                </Form>
            </div>
            <div className={current === 1 ? '' : 'hidden'}>
                <NewsEditor getContent={(value)=>{
                    setcontent(value)
                }} content={content}></NewsEditor>
            </div>
            <div className={current === 2 ? '' : 'hidden'}>
            </div>
        </div>
        
        <div style={{marginTop: '50px'}}>
            {
                current === 2 && <span>
                    <Button type="primary" onClick={()=>handleSave(0)} style={{marginRight: '20px'}}>保存草稿箱</Button>
                    <Button danger onClick={()=>handleSave(1)} style={{marginRight: '20px'}}>提交审核</Button>
                </span>
            }
            {
                current<2 && <Button onClick = {handleNext} type="primary" style={{marginRight: '20px'}}>下一步</Button>
            }
            {
                current>0 && <Button onClick = {handlePrevious}  type="primary" style={{marginRight: '20px'}}>&nbsp; 上一步 &nbsp;</Button>
            }
            
        </div>
        
        </div>
    );
};

export default NewsUpdata;